<template>
	<view>
		<view class="swiper">
			<swiper :indicator-dots="false">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<u-image @click="preview" border-radius="20" width="100%" height="400" :src="item.image" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<u-gap></u-gap>
		<view class="info">
			<view class="left">
				<view class="name">{{info.title}}</view>
				<view class="price">
					<view class="present-price">{{percentOff(info.percentOff)}}<text>折</text></view>
				</view>
			</view>
			<view class="right" @click="openMap">
				<view class="icon">
					<u-image width="68" height="68" :src="appletImgUrl+'kb-map-icon.png'"></u-image>
				</view>
				<view class="tip">去导航</view>
			</view>
		</view>
		<view class="store-name">
			<view>{{info.merchantAlias}}</view>
			<view>距离：{{distance}}</view>
		</view>
		<view class="describe">
			<view>
				{{info.vipDayDesc}}
			</view>
			<view>
				<view>活动时间：</view>
				<view>{{info.validStartTime}} - {{info.validEndTime || '长期'}}</view>
			</view>
			<view>
				<view>卡片描述：</view>
				<view>{{info.description || '暂无描述'}}</view>
			</view>
		</view>
		<view class="bar">
			<view class="bar-box">
				<view class="btn-box">
					<view class="btn" @click="openMap" v-if="source == 'myCard'">
						立即使用
					</view>
					<view class="btn" @click="purchase" v-else>
						立即领取
					</view>
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<u-gap height="150"></u-gap>
		<view class="safe-area-inset-bottom"></view>

		<u-popup v-model="show" mode="center" :backgroundColor="'transparent'">
			<view class="popup-hb">
				<view class="popup-image">
					<u-image :fade="false" :show-loading="false" width="442" height="500" :src="imageURL + 'USER/08d5d974-cb61-4dfb-801f-6c0ebf96cbcb.png'"></u-image>
					<view class="card-btn" @click="closePopup('jump')">
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	import QQMapWX from "@/common/qqmap-wx-jssdk.min"
	let qqmapsdk = ''
	import WSCoordinate from '@/js_sdk/WSCoordinate'
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				show: false,
				imageURL: this.imageURL,
				swiperList: [],
				info: '',
				distance: '未知',
				source:''
			};
		},
		onLoad(options) {
			this.source = options.source
			const self = this
			qqmapsdk = new QQMapWX({
				key: 'HQSBZ-EMKE5-6N5IW-QYGDQ-U6EMS-P2BOO'
			});
			this.info = uni.getStorageSync('vipCardData')
			this.swiperList = [{
				image: this.info.logo
			}]
			console.log(this.info);
			uni.getLocation({
				type: 'gcj02',
				altitude: true,
				success(even) {
					let coordinate = {
						latitude: even.latitude,
						longitude: even.longitude
					}
					self.calculationDistance(coordinate)
				}
			})
		},
		onUnload() {
			uni.removeStorageSync('vipCardData')
		},
		methods: {
			closePopup(type) {
				this.show = false
				this.$u.route({
					url: '/pages/user/myCard/myCard'
				})
			},
			percentOff(number) {
				return number == undefined ? 0 : Math.floor((number * 10) * 100) / 100
			},
			calculationDistance(coordinate) {
				const self = this
				qqmapsdk.calculateDistance({
					from: `${coordinate.latitude},${coordinate.longitude}`,
					to: `${this.info.latitude},${this.info.longitude}`,
					success({
						result
					}) {
						let {
							elements
						} = result
						console.log(result);
						let distance = elements[0].distance
						distance = distance < 1000 ? distance + '米' : (Math.round(distance / 100) / 10).toFixed(1) +
							'公里'
						self.distance = distance
					}
				})
			},
			purchase() {
				if (!uni.getStorageSync('userInfo')) {
					this.$u.route('/pages/user/login/login')
					return
				}
				this.$u.post('vipcardtemplate/drawVipCard', {
					storeId: this.info.storeId,
					vipStoreCardId: this.info.id
				}).then(res => {
					this.show = true
				})
			},
			share() {
				if (this.type == 'setMeal') {
					this.$u.post('sharepackage/pushSharePackage', {
						sharePackageId: this.info.id
					})
					return
				}
				this.$u.post('coupon/shareCoupon', {
					couponId: this.info.id
				})
			},
			calculationDistance(coordinate) {
				const self = this
				qqmapsdk.calculateDistance({
					from: `${coordinate.latitude},${coordinate.longitude}`,
					to: `${this.info.latitude},${this.info.longitude}`,
					success({
						result
					}) {
						let {
							elements
						} = result
						console.log(result);
						let distance = elements[0].distance
						distance = distance < 1000 ? distance + '米' : (Math.round(distance / 100) / 10).toFixed(1) +
							'公里'
						self.distance = distance
					}
				})
			},
			openMap() {
				let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(this.info.latitude, this.info.longitude);
				uni.openLocation({
					latitude: GCJ_Coordinate.latitude,
					longitude: GCJ_Coordinate.longitude,
					name: this.info.merchantAlias,
					address: this.info.merchantAddress
				})
			},
			preview() {
				uni.previewImage({
					urls: [this.swiperList[0].image]
				})
			}
		}
	}
</script>

<style lang="scss">
	.popup-hb {
		top: 0;
		left: 0;
		justify-content: center;
		z-index: 999;

		.card-btn {
			position: absolute;
			bottom: 0;
			height: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 270rpx;
		}

		.popup-image {
			position: relative;
		}
	}

	.bar {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 1;
		box-shadow: 2rpx -20rpx 20rpx 0px rgba(220, 220, 219, 0.2);

		.bar-box {
			display: flex;
			align-items: center;
			height: 120rpx;
			padding: 0 30rpx;

			button {
				background-color: transparent;
				line-height: normal;
				font-size: 30rpx;
				padding: 0;
				margin: 0;

				&::after {
					transform: scale(1);
					border: none;
				}
			}

			.btn-box {
				display: flex;
				flex: 1;
			}

			.btn {
				background-color: #FF4D46;
				flex: 1;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				border-radius: 20rpx;
			}
		}
	}

	.describe {
		padding: 15rpx 30rpx;

		>view {
			display: flex;
			padding: 15rpx 0;
			font-size: 30rpx;

			view {
				&:last-child {
					flex: 1;
				}
			}
		}
	}

	.store-name {
		margin: 0 30rpx;
		padding: 30rpx 0;
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
		justify-content: space-between;
		align-items: center;

		>view {
			&:first-child {
				font-size: 30rpx;
			}

			&:last-child {
				font-size: 24rpx;
				color: #aaa;
				border-left: 1rpx solid #BFBFBF;
				padding-left: 20rpx;
			}
		}
	}

	.info {
		display: flex;
		padding: 0 30rpx;
		justify-content: space-between;
		align-items: center;

		.right {
			.tip {
				font-size: 30rpx;
				margin-top: 15rpx;
			}

			.icon {
				width: 68rpx;
				margin: 0 auto;
				border-radius: 50%;
				box-shadow: 0 0 25rpx rgba($color: #000000, $alpha: .1);
			}
		}

		.left {
			flex: 1;

			.name {
				font-size: 48rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.price {
				display: flex;
				align-items: center;

				>view {
					&.tag {
						background-color: rgba($color: #F44B17, $alpha: .1);
						line-height: 40rpx;
						font-size: 24rpx;
						color: #F44B17;
						padding: 0 15rpx;
						border-radius: 20rpx;
					}

					&.original-price {
						margin: 0 20rpx;
						color: #AAAAAA;
						font-size: 30rpx;
						text-decoration: line-through;

						text {
							font-size: 24rpx;
						}
					}

					&.present-price {
						color: #F44B17;
						font-size: 40rpx;
						font-weight: bold;

						text {
							font-weight: normal;
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}

	.swiper {
		swiper {
			height: 400rpx;

			.swiper-item {
				padding: 0 30rpx;
				height: 100%;

				video {
					width: 100%;
				}
			}
		}
	}
</style>
